<template>
    <div class="modal">
        <div class="modal-container">
            <div class="modal-header">
                <h1 class="modal-title" v-if="operation=='update'">更新地址</h1>
                <h1 class="modal-title" v-if="operation=='add'">使用新地址</h1>
                <i class="fa fa-close close" @click="closeShippingModel"></i>  
            </div>
            <div class="modal-body">
                <div class="form">
                    <div class="form-line">
                        <label class="label" for="receiver-name">
                            <span class="required">*</span>收件人姓名：
                        </label>
                        <input class="form-item" id="receiver-name" placeholder="请输入收件人姓名"  v-model="shipping.receiverName" />
                    </div>
                    <div class="form-line">
                        <label class="label" for="receiver-province">
                            <span class="required">*</span>
                            所在城市：
                        </label>
                        <select class="form-item" id="receiver-province">
                            <option value="">上海</option>
                            <option value="">北京</option>
                            <option value="">请选择</option>
                        </select>
                        <select class="form-item" id="receiver-city">
                            <option value="">上海</option>
                            <option value="">北京</option>
                            <option value="">请选择</option>
                        </select>
                    </div>
                    <div class="form-line">
                        <label class="label" for="receiver-address">
                            <span class="required">*</span>
                            详细地址：
                        </label>
                        <input class="form-item" id="receiver-address" placeholder="请精确到门牌号" v-model="shipping.receiverAddress"/>
                    </div>
                    <div class="form-line">
                        <label class="label" for="receiver-phone">
                            <span class="required">*</span>
                            收件人手机：
                        </label>
                        <input class="form-item" id="receiver-phone" placeholder="请输入11位手机号"  v-model="shipping.receiverPhone"/>
                    </div>
                    <div class="form-line">
                        <label class="label" for="receiver-zip">邮政编码：</label>
                        <input class="form-item" id="receiver-zip" placeholder="如：100000"  v-model="shipping.receiverZip"/>
                    </div>
                    <div class="form-line">
                        <input type="hidden" id="receiver-id" v-model="shipping.id" />  
                        <a class="btn address-btn" @click="saveShipping">保存收货地址</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "shipping",
    props: [
        "operation",
        "shipping"
    ],
    data: function() {
      return {
      }
    },
    mounted: function(){
    },
    methods: {
        closeShippingModel(){
            this.$emit('closeShippingModel')
        },
        saveShipping(){
            console.log(this.shipping)
            this.$emit('saveShipping', this.shipping)
        }
    }
}
</script>

<style scoped>
/* modal部分 */
.modal{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #eee;
    background: rgba(0,0,0,.4);
    z-index: 1000;
    overflow-x: hidden;
    overflow-y: auto;
}
.modal .modal-container{
    width: 700px;
    margin: 50px auto;
    background: #fff;
    border-radius: 2px;
}
.modal .modal-container .modal-header{
    position: relative;
    padding: 15px;
    border-bottom: 1px solid #ccc;
}
.modal .modal-container .modal-header .modal-title{
    font-size: 14px;
}
.modal .modal-container .modal-header .close{
    position: absolute;
    padding: 10px;
    right: 10px;
    top: 10px;
    cursor: pointer;
}
.modal .modal-container .modal-body{
    padding: 15px;
}

/* form部分 */
.form .form-line{
    margin: 5px 0;
    overflow: hidden;
}
.form .form-line .label{
    display: block;
    float: left;
    width: 85px;
    text-align: right;
    height: 30px;
    line-height: 30px;
    margin-right: 10px;
    cursor: pointer;
}
.form .form-line .label .required{
    color: red;
}
.form .form-line .form-item{
    padding: 0 5px;
    height: 30px;
    line-height: 30px;
    outline: none;
    margin-right: 10px;
}
.form .form-line .btn{
    margin-left: 95px;
    height: 30px;
    line-height: 30px;
    font-size: 13px;
}
</style>